<template>
	<div v-if="loading" class="lxl-form">
		<el-form ref="lxlform" :rules="rules" :model="lxlform" label-width="100px">
			<el-form-item label="品牌名称" prop="name">
				<el-input v-model="lxlform.name"></el-input>
			</el-form-item>
			<el-form-item label="品牌Logo" prop="file">
				<!-- <el-upload
				:class="{hide: lxlform.file || fileList.length}"
				 action="#"
				:auto-upload="false"
				list-type="picture-card"
				:limit="1"
				:file-list="fileList"
				:on-change="changeIcon"
				:on-remove="removeIcon">
				<i class="el-icon-plus"></i>
				</el-upload> -->
				<lxl-uploadone v-model="lxlform.file" :fileList="fileList"/>
			</el-form-item>
			<el-form-item label="品牌故事" prop="description">
				<!-- <VueEditor 
				v-model="lxlform.description"
				:editorToolbar="customToolbar"
				useCustomImageHandler
				@image-added="handleImageAdded">
				</VueEditor> -->
				<lxl-editor v-model="lxlform.description"/>
			</el-form-item>
			<el-form-item>
				<el-button type="success" @click="save">保存</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import { get, post } from '@/plugins/axios.js'
export default {
	name: 'UserEdit',
	props: {
		id: {
			required: true
		},
		module: {
			required: true,
			type: String 
		}
	},
	// components: {
	// 	VueEditor
	// },
	created () {
		//console.log("接受到的id："+ this.id )
		//如果id存在再掉getone
		if (this.id) {
			//修改时，注意不改图片可以让他校验为空
			this.rules.file = []
			this.getone()
		} else {
			this.loading = true
		}
	},
	data () {
		const checkData = (rule,value,callback) => {
			get(this.url.check, { fieldName: rule.field, value: value, id: this.id }, response => {
				if (response){
					// 控制允不允许通过
					callback()
				} else {
					callback(new Error)
				}
			})
		}
		return {
			url: {
				check: this.module + '/check',
				getone: this.module + '/getone',
				add: this.module + '/add',
				update: this.module + '/update'
			},
			lxlform: {
				name: '',
				file: null,
				description: ''
			},
			loading: false,
			rules: {
				name: [
					{ required: true, message: '请输入品牌名称', trigger: 'blur' },
					{ max: 20,message: '品牌名称不能超过20个字符', trigger: 'blur' },
					{ validator: checkData, message: '该品牌名已经存在', trigger: 'blur'}
				],
				file: [
					{ required: true, message: '请上传品牌logo', trigger: 'blur'}
				],
				description: [
					{ required: true, message: '请输入品牌故事', trigger: 'blur' },
					{ max: 65535,message: '品牌故事不能超过65535个字符', trigger: 'blur' },
				]
			},
			fileList: [],
			// customToolbar: [
			//         ["bold", "italic", "underline"],
			//         [{ list: "ordered" }, { list: "bullet" }],
			//         ["image", "code-block"]
			//       ]
		}
	},
	methods: {
		//读取一条数据
		getone () {
			get(this.url.getone, { id: this.id }, response => {
				for (const key in this.lxlform) {
					//先判断response有没有这个key
					if (Object.prototype.hasOwnProperty.call(response,key)){
						this.lxlform[key] = response[key]
					}
				}
				this.lxlform.id = this.id
				this.fileList.push({
					name: response.logo,
					url: this.imgpath(response.logo)
				})
				this.loading = true
				console.log(response)
			})
		},
		save () {
			//校验
			this.$refs.lxlform.validate(valid => {
				if (valid){
					//校验通过
					//formData.append('name', 'zhangsan')
					post(this.id ? this.url.update : this.url.add, this.lxlform, response => {
						//$emit() 是一个函数
						console.log(this.lxlform)
						this.$emit("update:show", false)
						this.$emit("getTableData")
					})
				}
			})
		},
		changeIcon (file, fileList) {
			this.lxlform.file = file.raw
			console.log(file)
		},
		removeIcon () {
			this.lxlform.file = null
			this.fileList = []
		},
		// //自定义上传图片的方式
		// handleImageAdded (file, Editor, cursorLocation, resetUploader){
		// 	post('/pmsFile/upload', { file:file, bucket: 'image' },response=>{
		// 		Editor.insertEmbed(cursorLocation, "image", this.imgpath(response));
		// 		resetUploader()
		// 	})
		// }
	}
}
</script>

<style scoped lang="less">

</style>
